Le HTML : langage de balisage

Le HTML est un langage qui a été créé en 1991. Les sigles « HTML » sont l’abréviation de « HyperText Markup Language » ou « langage de balisage hypertexte » en français.

Le HTML est donc un langage de balisage, c’est-à-dire un langage qui va nous permettre de définir les différents contenus d’une page.

Pourquoi est-il si important de définir les différents contenus d’une page ? Pour répondre à cette question, il va avant tout falloir que vous compreniez ce qu’est un site internet et ce qu’il se passe lorsque vous essayez d’accéder à un site internet.

Ici, je vais essayer de rester le plus simple possible. Tout d’abord, qu’est-ce qu’un site internet ? Un site internet est un ensemble de fichiers de code et de medias (images, videos, etc.) liés entre eux et disponibles à tout moment via le web.

Pour que les différentes ressources constituant un site internet soient toujours accessibles, on les héberge généralement sur un serveur d’un hébergeur professionnel comme OVH par exemple.

Un serveur est un ordinateur plus ou moins comme les nôtres et qui stocke les différentes ressources d’un ou de plusieurs site internet. Les seules différences entre un serveur et nos ordinateurs est qu’un serveur est généralement beaucoup plus puissant que nos ordinateurs, qu’il est (normalement) toujours connecté à Internet et qu’il va posséder quelques logiciels supplémentaires lui permettant d’exécuter certains codes.

Notez ici qu’on appelle ces ordinateurs des « serveurs » car leur seul et unique rôle va être de « servir » (au sens de « fournir ») des pages dès que quelqu’un va le leur demander.

Comment accède-t-on à une page d’un site internet ? Pour répondre à cette deuxième question, je vais m’aider d’un exemple. Imaginons que l’on souhaite accéder à la page d’accueil de mon site. Pour cela, on va taper www.pierre-giraud.com dans la barre de notre navigateur.

Lorsqu’on demande à accéder à une page d’un site internet, nous sommes ce qu’on appelle des « clients ».

Notre navigateur va contacter le serveur sur lequel est hébergée la page à laquelle on souhaite accéder et lui demander de renvoyer les différents éléments de la page : la page sous forme de code HTML et potentiellement les différents médias intégrés dans la page (ce qu’il se passe est en pratique bien évidemment plus complexe mais encore une fois je simplifie volontairement ici).

Le navigateur va donc recevoir ces différents éléments et les afficher. Cependant, comment fait-il pour savoir ce qu’il doit afficher ? Il va bien évidemment utiliser le code HTML. En effet, le navigateur comprend bien les différentes balises HTML (le HTML utilise ce qu’on appelle des « balises » pour définir les contenus) et va donc « comprendre » de quoi est constituée notre page et ce qu’il doit afficher.

Le rôle du HTML est donc crucial puisqu’il va être notre langage privilégié pour indiquer aux navigateurs ce quoi est constituée chaque page et ce qu’ils doivent afficher. Grâce au HTML, on va par exemple pourvoir indiquer que tel contenu est un texte qui n’est qu’un paragraphe, que tel autre contenu est un texte qui est un titre de niveau 1 dans notre page, que tel autre contenu est une liste, un lien, etc.

En plus de cela, le HTML va également nous permettre d’insérer différents médias (images, vidéos, etc.) dans nos pages web en indiquant au navigateur » à cette place-là dans ma page, je veux que s’affiche cette image « . Notez que dans ce cas précis, pour que le navigateur affiche la bonne image, on va lui fournir l’adresse de l’image dans le code HTML.

Le CSS : langage de styles

Le CSS a été créé en 1996, soit 5 ans après le HTML. Les sigles « CSS » sont l’abréviation de « Cascading StyleSheets » ou « feuilles de styles en cascade » en français.

Le CSS vient résoudre un problème bien différent du HTML : en effet, le HTML sert à définir les différents éléments d’une page, à leur donner du sens. Le CSS, lui, va servir à mettre en forme les différents contenus définis par le HTML en leur appliquant des styles.

Le HTML va donc créer la structure des pages tandis que le CSS va nous permettre de modifier l’apparence des contenus de la page. On va ainsi par exemple pouvoir définir la taille, la couleur ou l’alignement de certains contenus HTML et notamment en l’occurrence de certains textes dans notre page.

Pour styliser le contenu lié à un élément HTML en CSS, nous allons pouvoir le cibler en nous basant sur l’élément HTML en question ou en utilisant d’autres procédés que nous verrons plus tard dans ce cours.